<template>
  <div>
    <el-dialog v-model="props.dialogPrice" title="价格处理" @close="handlePriceClose">
      <el-table :data="tableDate" style="height: calc(100vh - 580px)">
        <el-table-column label="商品ID-skuID" align="center">
          <template #default="scope">
            <el-space spacer="-">
              <el-text class="mx-1">{{ scope.row.productId }}</el-text>
              <el-text class="mx-1">{{
                scope.row.productOptionSkuId || "无"
              }}</el-text>
            </el-space>
          </template>
        </el-table-column>

        <el-table-column label="商品图" align="center" width="100">
          <template #default="scope">
            <image-preview :src="scope.row.host" :width="50" :height="50" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name" width="170" />
        <el-table-column label="规格" align="center" prop="optionValueName" width="170" />
        <el-table-column align="center" prop="collectionPrice" width="170">
          <template #header="scope">
            入库价{{ tableDate[0]?.currencyName }}）
          </template>
        </el-table-column>

        <el-table-column align="center" prop="crossedPrice" width="170" fixed="right">
          <template #header="scope">
            划线价（{{ tableDate[0]?.currencyName }}）
          </template>
          <template #default="scope">
            <el-input-number :min="1" v-model="scope.row.crossedPrice" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sellingPrice" width="170" fixed="right">
          <template #header="scope">
            销售价（{{ tableDate[0]?.currencyName }}）
          </template>
          <template #default="scope">
            <el-input-number :min="1" v-model="scope.row.sellingPrice" placeholder="请输入" />
          </template>
        </el-table-column>
      </el-table>

      <Pagination :total="total" :limit="queryParams.pageSize" :page="queryParams.pageNum"
        @pagination="handlePageChange">
      </Pagination>
      <template #footer>
        <el-descriptions title="批量设置" />
        <div class="price_box mb8">
          <el-radio-group v-model="radio1">
            <el-radio :value="1">划线价</el-radio>
            <el-radio :value="0">销售价</el-radio>
          </el-radio-group>
          <el-text type="info" size="small">批量修改价格时只修改当前页面的价格，请分别提交每个页面的价格</el-text>
        </div>
        <div class="price_box">
          <div class="price_box" style="gap: 20px">
            <el-button link type="primary" v-for="(item, index) in priceSmall" :key="index"
              @click="handlePublicType(item, index)">{{ item.name }}</el-button>
          </div>
          <div>
            <el-button type="primary" @click="handlePriceSure">确定</el-button>
            <el-button type="danger" @click="handlePriceClose">取消</el-button>
          </div>
        </div>
      </template>

      <el-dialog v-model="showInput" width="500px" @close="handleClose" align-center>
        <el-form :model="from" :inline="true" ref="repairFromRef">
          <el-form-item :label="labelPrice" prop="input2">
            <el-input-number style="width: 400px" v-model="from.input2" placeholder="请输入（美元）" :min="1" :max="9999">
              <template #suffix>
                <span>美元</span>
              </template>
            </el-input-number>
          </el-form-item>
          <el-text type="info" style="margin-left: 195px" v-if="showIndex">若减价后价格小于1，则自动被修改为1</el-text>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="handleSure">确定</el-button>
          <el-button type="danger" @click="handleClose">取消</el-button>
        </template>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, watch, reactive } from "vue";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["handlePriceClose", "handlePriceSure"]);
const tableDate = ref([]);
const total = ref(0);
const radio1 = ref(null);
const showInput = ref(false);
const showIndex = ref(0);

// 查询参数
const from = ref({
  input2: null,
});
const labelPrice = ref(""); //label名称

const props = defineProps({
  Item: {
    type: Object,
    default: {},
  },
  //   默认隐藏
  dialogPrice: {
    type: Boolean,
    default: false,
  },
});
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  param: {
    productIds: [], //源站点状态
  },
});
watch(
  () => props.dialogPrice,
  () => {
    if (!props.dialogPrice) return;
    getList();
  }
);
const getList = () => {
  tableDate.value =[]
  if (props.Item.newProductIds) {
    queryParams.value.param.productIds = props.Item.newProductIds;
  } else {
    queryParams.value.param.productIds = [props.Item.id];
  }
  product.general
    .productGetpricelist({
      data: queryParams.value,
    })
    .then((res) => {
      total.value = res.total;
      tableDate.value = res.data;
    });
};

const handleSure = () => {
  if (!from.value.input2) return proxy.$message.warning("请输入价格");
  if (radio1.value) {
    // 划线价格
    processLineationPrice();
  } else {
    // 销售价格
    processPrice();
  }
};
const processLineationPrice = () => {
  // 销售价格
  if (labelPrice.value === "加价") {
    for (let item of tableDate.value) {
      item.crossedPrice = item.crossedPrice + from.value.input2;
    }
  } else if (labelPrice.value === "减价") {
    for (let item of tableDate.value) {
      item.crossedPrice = item.crossedPrice - from.value.input2;
    }
  } else {
    for (let item of tableDate.value) {
      item.crossedPrice = from.value.input2;
    }
  }
  handleClose();
};
const processPrice = () => {
  // 销售价格
  if (labelPrice.value === "加价") {
    for (let item of tableDate.value) {
      item.sellingPrice = item.sellingPrice + from.value.input2;
    }
  } else if (labelPrice.value === "减价") {
    for (let item of tableDate.value) {
      item.sellingPrice = item.sellingPrice - from.value.input2;
    }
  } else {
    for (let item of tableDate.value) {
      item.sellingPrice = from.value.input2;
    }
  }
  handleClose();
};
const handlePriceSure = () => {
  if (!tableDate.value.length)
    return proxy.$message.warning("数据为空不能修改价格");
  var batchList = [];
  tableDate.value.forEach((e) => {
    batchList.push({
      productOptionSkuId: e.productOptionSkuId,
      productId: e.productId,
      sellingPrice: e.sellingPrice, //销售价
      crossedPrice: e.crossedPrice, //划线价
    });
  });

  proxy.$modal.confirm("是否确认修改价格？").then(() => {
    product.general.productBatchupdateprice({ data: batchList }).then((res) => {
      if (res.code === 200) {
        proxy.$modal.msgSuccess("修改价格成功");
        getList();
        emits("handlePriceSure");
      }
    });
  });
};
const handlePublicType = (row, index) => {
  if (radio1.value === null) return proxy.$message.warning("请选择价格类型");
  if (!tableDate.value.length)
    return proxy.$message.warning("没有数据，不能添加");

  if (index === 1) {
    labelPrice.value = "加价";
    showIndex.value = 0;
  } else if (index === 2) {
    showIndex.value = 1;
    labelPrice.value = "减价";
  } else {
    labelPrice.value = "改价";
    showIndex.value = 0;
  }
  showInput.value = true;
};
const handlePriceClose = () => {
  radio1.value = null;
  emits("handlePriceClose");
  handleClose();
};
const handleClose = () => {
  showInput.value = false;
  labelPrice.value = "";
  showIndex.value = 0;
  from.value.input2 = null;
};
// 分页
const handlePageChange = (newPage) => {
  queryParams.value.pageNum = newPage.page;
  queryParams.value.pageSize = newPage.limit;
  getList();
};
const priceSmall = reactive([
  {
    name: "改价",
  },
  {
    name: "加价",
  },
  {
    name: "减价",
  },
]);
</script>
<style lang="scss" scoped>
.price_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>